<template>
  <div class="registerBox">
    <div class="Exit">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <inputCompon
      textplaceholder="请输入手机号码"
      type="text"
      rule="\d{5,11}"
      err_Msg="请输入正确的手机号码"
      @setval="setusername"
    ></inputCompon>
    <inputCompon
      textplaceholder="请输入呢称"
      type="text"
      rule=".{3,9}"
      @setval="setnickname"
    ></inputCompon>
    <inputCompon
      textplaceholder="请输入密码"
      type="password"
      rule=".{3,9}"
      err_Msg="请输入正确的密码"
      @setval="setuserpassword"
    ></inputCompon>
    <btnCompon btnval="确认注册" @login="login"></btnCompon>
  </div>
</template>

<script>
import inputCompon from "@/components/inputCompon";
import btnCompon from "@/components/btnCompon";
export default {
  data() {
    return {
      username: "",
      userpassword: "",
      nickname: ""
    };
  },
  components: {
    inputCompon,
    btnCompon
  },
  methods: {
    setusername(username) {
      this.username = username;
    },
    setuserpassword(userpassword) {
      this.userpassword = userpassword;
    },
    setnickname(nickname) {
      this.nickname = nickname;
    },
    login() {
      console.log(this.username, this.nickname, this.userpassword);
      if (!this.username || !this.nickname || !this.userpassword) {
        this.$toast.fail("信息不能有空");
        return;
      }
      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      }).then(res => {
        console.log(res);
        if (res.data.message == "注册失败，请检查参数") {
          this.$toast.fail("手机号码格式错误");
        } else if (res.data.message == "注册成功") {
          this.$toast.success("恭喜注册成功 正在跳转到登录页");
          this.username = "";
          this.password = "";
          this.nickname = "";
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.Exit {
  margin: 6.667vw;
  .iconicon-test {
    font-size: 6.667vw;
  }
}
.logo {
  text-align: center;
  .iconnew {
    color: red;
    font-size: 33.333vw;
  }
}
</style>